<template>
	<view class="content">
		<view class="top">
			<u-tabs lineColor="#ffce45" :list="typeList" @click="clickType"></u-tabs>
			<u-tabs lineColor="#ffce45" :list="weekList" :current="weekIndex" @click="clickWeek"></u-tabs>
		</view>
		<u-empty :show="vodList.length<=0" textSize="3vh" :text="tip" mode="list">
		</u-empty>
		<view class="vodList">
			<u-grid v-if="vodList.length>0" :border="false" col="3">
				<u-grid-item v-for="(listItem,listIndex) in vodList" :key="listIndex">
					<image class="vodImg" :src="listItem.vodPic" @click="imgClick(listItem.vodId)">
					</image>
					<text class="vodName">{{listItem.vodName}}</text>
				</u-grid-item>
			</u-grid>
		</view>
	</view>
</template>

<script>
	import {
		getSchedule
	} from '@/config/api.js'
	export default {
		data() {
			return {
				vodList: [],
				typeName: "动漫",
				week: "",
				weekIndex: 0,
				area: "中国",
				tip: "正在加载...",
				typeList: [{
						name: "国漫",
					},
					{
						name: "日漫",
					},
					{
						name: "电影",
					},
					{
						name: "电视剧",
					},
					{
						name: "综艺",
					},
				],
				weekList: [{
						name: "星期日",
					},
					{
						name: "星期一",
					},
					{
						name: "星期二",
					},
					{
						name: "星期三",
					},
					{
						name: "星期四",
					},
					{
						name: "星期五",
					},
					{
						name: "星期六",
					},
				],
			}
		},
		onLoad() {
			this.init();
		},
		methods: {
			init() {
				this.week = this.weekList[new Date().getDay()].name;
				this.weekIndex = new Date().getDay();
				this.vodList = [];
				this.getVods();
			},
			clickType(item) {
				console.log(item)
				switch (item.name) {
					case "国漫":
						this.typeName = "动漫";
						this.area = "中国";
						break;
					case "日漫":
						this.typeName = "动漫";
						this.area = "日本";
						break;
					case "电影":
						this.typeName = "片";
						this.area = "";
						break;
					case "电视剧":
						this.typeName = "剧";
						this.area = "";
						break;
					case "综艺":
						this.typeName = "综艺";
						this.area = "";
						break;
					default:
						break;
				}
				this.vodList = [];
				this.getVods();
			},
			clickWeek(item) {
				console.log(item)
				this.week = item.name;
				this.vodList = [];
				this.getVods();
			},
			getVods() {
				getSchedule({
					params: {
						week: this.week,
						type: this.typeName,
						area: this.area,
					}
				}).then(res => {
					this.vodList = res.data.data;
					if (this.vodList.length <= 0) {
						this.tip = "没有更多了";
					} else {
						this.tip = "正在加载...";
					}
				}).catch(err => {
					console.log(err);
				});
			},
			//点击音频事件
			imgClick(data) {
				//data：vodId
				uni.navigateTo({
					url: '/pages/video/video?vodId=' + data,
				})
			}
		}
	}
</script>

<style scoped>
	.content {
		display: flex;
		flex-direction: column;
		width: 100%;
	}

	.top {
		position: fixed;
		top: var(--status-bar-height);
		width: 100%;
		z-index: 999;
		background-color: #ffffff;
	}

	.vodList {
		width: 100%;
		margin-top: 13vh;
	}

	.vodImg {
		width: 90%;
		height: 23vh;
		object-fit: cover;
		border-radius: 10px;
		background-color: #eeeeee;
	}

	.vodName {
		width: 90%;
		text-align: center;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
</style>